<template>
  <div style="min-width: 829px">
    <div v-if="$route.path == '/vipList'">
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="110px">
          <!-- <el-form-item label="门店：">
              <el-select v-model="paging.store_id" clearable style="width:200px" placeholder="请选择">
                  <el-option
                      v-for="item in shopList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id">
                  </el-option>
              </el-select>
          </el-form-item> -->
          <el-form-item label="会员卡名称">
            <el-input style="width: 200px" v-model="paging.title"></el-input>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="serch()" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <div class="operation-box clear-float">
          <!-- <el-button
            icon="el-icon-download"
            @click="exportFile()"
            :loading="isExport"
            >导出</el-button
          > -->
          <el-button
            icon="el-icon-plus"
            @click="setRow(1)"
            style="margin-left: auto"
            type="primary"
            >新增</el-button
          >
        </div>
        <el-table
          v-loading="loading"
          :data="tableData"
          header-row-class-name="has-gutter-table"
          style="width: 100%"
          height="calc(100vh - 370px)"
        >
          <el-table-column
            width="200px"
            label="会员卡编号"
            prop="id"
          ></el-table-column>
          <el-table-column prop="title" label="会员卡名称"> </el-table-column>
          <el-table-column prop="price" label="金额（￥）"> </el-table-column>
          <el-table-column prop="give_price" label="赠送金额（￥）">
          </el-table-column>
          <!-- <el-table-column prop="content" label="适用范围"> </el-table-column> -->
          <el-table-column fixed="right" width="170" label="操作">
            <template slot-scope="scope">
              <!-- <span @click="setRow(2, scope.row)" class="tab-table-text"
                >查看</span
              > -->
              <span @click="setRow(3, scope.row)" class="tab-table-text"
                >编辑</span
              >
              <!-- <span @click="setRow(5, scope.row)"  class="tab-table-text"
                >退卡</span
              >
              <span @click="setRow(6, scope.row)"  class="tab-table-text"
                >手动充值</span
              >  -->
              <span @click="setRow(4, scope.row, index)" class="tab-red-text"
                >删除</span
              >
            </template>
          </el-table-column>
         
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 详情 -->
      <el-dialog
        title="查看详情"
        :visible.sync="dialogFormVisible"
        width="500px"
      >
        <el-form :model="form" label-width="100px">
          <el-form-item label="会员卡名称">
            <el-input
              di
              v-model="form.title"
              autocomplete="off"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="金额">
            <el-input
              v-model="form.price"
              autocomplete="off"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="赠送金额">
            <el-input
              v-model="form.give_price"
              autocomplete="off"
              :readonly="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="适用范围：">
            <el-select
              v-model="scope"
              placeholder="请选择"
              style="width: 250px"
              :disabled="true"
            >
              <el-option label="全部" value="0"></el-option>
              <el-option label="门店" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="适用范围：" v-if="scope == 1">
            <el-select
              v-model="store_ids"
              placeholder="请选择"
              style="width: 250px"
              multiple
              :disabled="true"
            >
              <el-option
                v-for="(ele, index) in list"
                :key="index"
                :label="ele.title"
                :value="ele.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会员卡背景：">
              <img :src="form.img" alt="" style="width:120px;height:120px;border-radius:6px ;">
          </el-form-item>
          <el-form-item label="介绍" readonly="true">
            <el-input
              v-model="form.content"
              autocomplete="off"
              type="textarea"
              rows="4"
              :readonly="true"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">关 闭</el-button>
          <!-- <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> -->
        </div>
      </el-dialog>
      <!-- 手动充值 -->
      <el-dialog
        title="手动充值"
        :visible.sync="dialogFormVisible2"
        width="500px"
        :before-close="handleClose"
      >
        <el-form :model="ruleFrom">
          <el-form-item label="充值金额">
            <el-input v-model="ruleFrom.money" type="number"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button
            @click="
              dialogFormVisible2 = false;
              handleClose();
            "
            >取 消</el-button
          >
          <el-button type="primary" @click="confirm(1)">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 退卡 -->
      <el-dialog title="退卡" :visible.sync="dialogFormVisible3" width="500px">
        <el-form :model="ruleFrom1">
          <el-form-item label="退卡金额">
            <el-input v-model="ruleFrom1.return_money" type="number"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false">取 消</el-button>
          <el-button type="primary" @click="confirm(2)">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "",
        content: "",
        price: "",
        store_ids: "",
        content: "",
        give_price: "",
        img:"",
      },
      store_ids: "",
      scope: "0",
      dialogFormVisible: false,
      options: [
        {
          value: "正大店",
          label: "正大店",
        },
      ],
      recordList: [],
      list: [],
      loading: false,
      paging: {
        page: 1,
        total: 0,
        limit: 10,
      },
      dialogFormVisible3: false,
      dialogFormVisible2: false,
      ruleFrom: {
        id: "",
        money: "",
      },
      ruleFrom1: {
        id: "",
        return_money: "",
      },
      return_money: "",
      tableData: [],
      isExport: false,
      shopList: []
    };
  },
  created() {
    this.GetList();
    this.getAllStores();
    this.homegetStore()
  },
  methods: {
    async homegetStore(){
        let {code,data} = await this.$Http.homegetStore();
        if(code){
            this.shopList = data;
        }
    },
    async GetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getVip(this.paging);
      this.loading = false;
      if (code) {
        console.log(22, data)
        this.tableData = data.data;
        this.paging.total = data.total;
      }
    },
    handleClose(dom) {
      this.$refs["ruleForm"].resetFields();
      this.$refs["ruleFrom1"].resetFields();
      dom && dom();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.GetList();
    },
    serch() {
      // if (!this.paging.title) {
      //   this.$message.error("请输入会员卡名称");
      //   return;
      // }
      this.GetList();
    },
    async setRow(type, row, index) {
      if (type == 1) {
        this.utils.goUrl(`/editVip?title=新增会员卡`);
      } else if (type == 2) {
        let { code, data } = await this.$Http.getVip({ id: row.id });
        if (code) {
          this.dialogFormVisible = true;
          this.form.content = data.content;
          this.form.title = data.title;
          this.form.price = data.price;
          this.form.give_price = data.give_price;
          this.form.img = data.img
          if (data.store_ids != 0) {
            this.scope = "1";
            let store_ids = data.store_ids.split(",");
            this.store_ids = store_ids.map(Number);
          } else {
            this.scope = "0";
            this.form.store_ids = data.store_ids;
          }
        }
      } else if (type == 3) {
        this.utils.goUrl(`/editVip?title=会员卡编辑&id=${row.id}`);
      } else if (type == 4) {
        this.$confirm("此操作将永久删除该会员卡, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(async () => {
            let { code } = await this.$Http.delVip({
              id: JSON.stringify(row.id),
            });
            if (code) {
              this.GetList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else if (type == 5) {
        this.dialogFormVisible3 = true;
        this.ruleFrom1.return_money = row.price * 1;
        this.return_money = row.price * 1;
        console.log(this.ruleFrom1.return_money, "this.ruleFrom1.return_money");
      } else if (type == 6) {
        this.dialogFormVisible2 = true;
      }
    },
    async getAllStores() {
      let { code, data } = await this.$Http.getAllStore();
      this.list = data;
    },
    reset() {
      //重置
      this.paging.title = "";
      this.GetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
  
}
::v-deep{
  .el-form-item__content{
    line-height: 0;
  }
}
</style>